<template>
  <div class="app-container">
    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="formData.productName" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="类别">
        <el-select v-model="formData.categoryType" placeholder="请选择类别">
          <template v-for="item in categoryList">
            <el-option :key="item.id" :label="item.categoryName" :value="item.categoryType" />
          </template>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="resetSubmit()">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="btn-container">
      <el-button type="primary" @click="goToAddProduct">添加商品</el-button>
    </div>
    <el-table
      :height="tableHeight"
      header-cell-class-name="aa"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        align="center"
        type="index"
        width="50"
      />
      <el-table-column
        prop="productName"
        label="名称"
        min-width="180"
      />
      <el-table-column
        prop="categoryName"
        align="center"
        label="图片"
        min-width="180"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.productIcon"
            fit="fit"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="productPrice"
        label="价格"
        align="center"
        width="120"
      />
      <el-table-column
        prop="categoryName"
        label="类别"
        align="center"
        width="150"
      />
      <!--<el-table-column-->
      <!--prop="productIcon"-->
      <!--label="图片"-->
      <!--&gt;-->
      <!--<template slot-scope="scope">-->
      <!--<el-image-->
      <!--style="width: 100px; height: 100px"-->
      <!--:src="scope.row.productIcon"-->
      <!--:fit="fit"-->
      <!--/>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column
        prop="productStock"
        label="库存"
        align="center"
        width="100"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="180"
      />
      <el-table-column
        prop="productStatus"
        label="是否下架"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.productStatus == 1?'是':'否' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="queryProductInfo(scope.row)">查看</el-button>
          <el-button type="text" size="small" @click="goToUpdate(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pages">
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-drawer
      title="我是标题"
      size="500px"
      :visible.sync="drawer"
      :with-header="false"
    >
      <div class="drawer-container">
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple" style="text-align: right">名称：</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple">{{ info.productName }}</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple" style="text-align: right">价格：</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple">{{ info.productPrice }}</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple" style="text-align: right">类别：</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple">{{ info.categoryType }}</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple" style="text-align: right">库存：</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple">{{ info.productStock }}</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple" style="text-align: right">创建时间：</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple">{{ info.createTime }}</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple" style="text-align: right">更新时间：</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple">{{ info.updateTime }}</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple" style="text-align: right">是否下架：</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple">{{ info.productStatus == 1?'是':'否' }}</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple" style="text-align: right">小图：</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple">
            <el-image
              style="width: 100px; height: 100px"
              :src="info.productIcon"
              :fit="fit"
              @click="handlePictureCardPreview(info.productIcon)"
            />
          </div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple" style="text-align: right">轮播图：</div></el-col>
          <el-col :span="18">
            <div class="grid-content bg-purple">
              <template v-for="item in info.productImgList">
                <el-image
                  :key="item.id"
                  style="width: 100px; height: 100px;;margin-right: 5px"
                  :src="item.productPath"
                  :fit="fit"
                  @click="handlePictureCardPreview(item.productPath)"
                />
              </template>
            </div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple" style="text-align: right">描述：</div></el-col>
          <el-col :span="18">
            <div class="grid-content bg-purple">
              <template v-for="item in info.productDescribeList">
                <el-image
                  :key="item.id"
                  style="width: 100px; height: 100px;margin-right: 5px"
                  :src="item.productPath"
                  :fit="fit"
                  @click="handlePictureCardPreview(item.productPath)"
                />
              </template>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple" style="text-align: right">参数：</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple">
            <div v-for="item in info.productParameterList" :key="item.id" class="parameter-container">
              <div>{{ item.parameterName }}:</div>
              <div>{{ item.parameterValue }}</div>
            </div>
          </div></el-col>
        </el-row>
      </div>
    </el-drawer>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

  </div>

</template>

<script>
import { getList, queryCategory, queryProductInfo } from '@/api/product'
export default {
  name: 'Index',
  data() {
    return {
      tableHeight: window.innerHeight - 265,
      categoryList: [],
      drawer: false,
      dialogImageUrl: '',
      dialogVisible: false,
      tableData: [],
      formData: {
        page: 1,
        pageSize: 10,
        categoryType: '',
        productName: ''
      },
      info: {
        productId: '',
        productName: '',
        categoryType: '',
        productPrice: '',
        productStock: '',
        productStatus: '',
        productIcon: '',
        createTime: '',
        updateTime: '',
        productImgList: [],
        productDescribeList: [],
        productParameterList: []
      },
      total: 0,
      fit: 'fill',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
  },
  mounted() {
    this.queryCategory()
    this.queryList()
  },
  methods: {
    queryList() {
      getList(this.formData).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
      })
    },
    onSubmit() {
      console.log('submit!')
      this.formData.page = 1
      this.formData.pageSize = 10
      this.queryList()
    },
    resetSubmit() {
      this.formData = {
        page: 1,
        pageSize: 10,
        categoryType: '',
        productName: ''
      }
      this.queryList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formData.pageSize = val
      this.queryList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formData.page = val
      this.queryList()
    },
    goToAddProduct() {
      this.$router.push({ path: '/product/addProduct/index' })
    },
    goToUpdate(row) {
      this.$router.push({ path: '/product/addProduct/index', query: { productId: row.productId }})
    },
    queryCategory() {
      queryCategory().then(response => {
        this.categoryList = response.data
      })
    },
    queryProductInfo(row) {
      this.drawer = true
      queryProductInfo(row.productId).then(response => {
        console.log(response)
        const data = response.data
        const obj = {
          productId: data.productInfo.productId,
          productName: data.productInfo.productName,
          categoryType: row.categoryName,
          productPrice: data.productInfo.productPrice,
          productStock: data.productInfo.productStock,
          productStatus: data.productInfo.productStatus,
          productIcon: data.productInfo.productIcon,
          createTime: row.createTime,
          updateTime: row.updateTime,
          productImgList: data.productImgList,
          productDescribeList: data.productDescribeList,
          productParameterList: data.productParameterList
        }
        this.info = obj
      })
    },
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url
      this.dialogVisible = true
    }
  }

}
</script>

<style lang="scss" scoped>
  .pages{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 15px 0px;
  }
  .btn-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .el-row {
    margin-bottom: 20px;
      &:last-child {
     margin-bottom: 0;
   }
  }
  .drawer-container{
    padding: 30px 15px;
    height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .parameter-container{
    display: flex;
    flex-direction: row;
    justify-content: left;
  }

</style>
